<template>
    <div>
        <!-- 面包屑 -->
        <el-breadcrumb separator-class="el-icon-arrow-right">
            <el-breadcrumb-item :to="{ path: '/home' }">首页</el-breadcrumb-item>
            <el-breadcrumb-item>商品管理</el-breadcrumb-item>
            <el-breadcrumb-item>商品分类</el-breadcrumb-item>
        </el-breadcrumb>

        <!-- card卡片 -->
        <el-card class="box-card">
            <el-row>
                <el-col>
                    <el-button type="primary" @click="addGoods">添加分类</el-button>
                </el-col>
            </el-row>

            <!-- 表格 -->
            <tree-table :data="goodsTable" :columns="columns" :selection-type="false" :expand-type="false" show-index index-text="#" border stripe >
                            <!--
                                                            vue-table-with-tree-grid组件简单配置
                                columns  代表列
                                selection-type   是否显示复选框
                                expand-type      是否为展开行类型表格
                                show-index      是否显示数据索引
                                index-text       可设置索引的标题名称
                                border    是否显示纵向边框   stripe是否显示间隔斑马线
                                show-row-hover  鼠标悬停时 是否高亮  默认true高亮
                            -->

            <!-- "是否有效"模板 -->
                <template slot="isok" slot-scope="scope">
                    <i class="el-icon-success" v-if="scope.row.cat_deleted === false" style="color: rgb(38, 174, 253);"></i>
                    <i class="el-icon-error" v-else style="color: rgb(248, 77, 77);"></i>
                </template>

            <!-- "排序"模板 -->
                <template slot="paixu" slot-scope="scope">
                    <el-tag type="primary" v-if="scope.row.cat_level === 0">一级</el-tag>
                    <el-tag type="success" v-else-if="scope.row.cat_level === 1">二级</el-tag>
                    <el-tag type="danger" v-else>三级</el-tag>
                </template>

            <!-- "操作"模板 -->
                <template slot="caozuo" slot-scope="scope">
                    <el-button type="primary" icon="el-icon-edit" size="mini" @click="goodsEdit(scope.row)">编辑</el-button>
                    <el-button type="danger" icon="el-icon-delete" size="mini" @click="goodsDelete(scope.row)">删除</el-button>
                </template>

            </tree-table>

            <!-- 分页区域 -->
            <el-pagination
                    @size-change="handleSizeChange"
                    @current-change="handleCurrentChange"
                    :current-page="goodsInfor.pagenum"
                    :page-sizes="[5, 10, 20, 30]"
                    :page-size="goodsInfor.pagesize"
                    layout="total, sizes, prev, pager, next, jumper"
                    :total="total"
            ></el-pagination>
        </el-card>

        <!-- 添加分类对话框 -->
        <el-dialog title="添加分类" @close="destroyDialog('add')" :visible.sync="dialogVisible_addGoods" width="50%">
            <!-- 主体内容 -->
            <el-form ref="addRef" :model="addFrom" label-width="80px" :rules="rules">
                <el-form-item label="分类名称" prop="cat_name">
                    <el-input v-model="addFrom.cat_name"></el-input>
                </el-form-item>
                <!-- 级联选择器 -->
                <el-form-item label="父类分级">
                    <el-cascader
                      v-model="CascaderValue"
                      :options="goodsTableListTwo"
                      :props="cascaderProps"
                      @change="handleChange"
                      clearable>
                    </el-cascader>
                </el-form-item>
            </el-form>
            <!-- 底部 "确定" "取消" 按钮 -->
            <span slot="footer" class="dialog-footer">
                <el-button @click="dialogVisible_addGoods = false">取 消</el-button>
                <el-button type="primary" @click="addGoodsOK">确 定</el-button>
            </span>
        </el-dialog>

        <!-- 编辑对话框 -->
        <el-dialog title="修改分类名称" :visible.sync="dialogVisible_edit" width="50%"  @close="destroyDialog('edit')">
            <el-form :model="editFrom" label-width="80px" :rules="rules" ref="editREF">
                <el-form-item label="分类名称" prop="cat_name">
                    <el-input v-model="editFrom.cat_name"></el-input>
                </el-form-item>
            </el-form>
            <span slot="footer" class="dialog-footer">
                <el-button @click="dialogVisible_edit = false">取 消</el-button>
                <el-button type="primary" @click="goodsEditOK">确 定</el-button>
            </span>
        </el-dialog>
    </div>
</template>

<script>
export default {
    name:"GoodsFenlei",
    data() {
        return {
            //存放商品信息（三级 全局使用）
            goodsTable:[],
            //存放商品信息（只有两级 添加分类时使用）
            goodsTableListTwo:[],
            //请求商品列表所需要的参数
            goodsInfor:{
                type: 3,
                pagenum: 1,
                pagesize: 5
            },
            //总数量
            total:0,

            //"添加分类 "对话框数据
            addFrom:{
                cat_name:'',     //分类名称
                cat_pid:"0",      //分类父 ID    如果要添加1级分类，则父分类Id应该设置为  `0`
                cat_level:"0"     //分类层级       `0`表示一级分类；`1`表示二级分类；`2`表示三级分类
            },
            //"编辑分类" 对话框数据
            editFrom:{
                cat_name:"",
                cat_id:""
            },

            //添加分类对话框中级联选择器value(即父分类Id)
            CascaderValue:[0],
            //级联选择器cascader的prop配置对象
            cascaderProps:{
                expandTrigger:'hover',     //决定是点击还是触摸显示下一级
                value:'cat_id',       //指具体选中了那个值的属性  一般为label相对应的id
                label:'cat_name',       //在页面上看到的值
                children:'children',     //父子嵌套用的哪个属性
                checkStrictly:true      //是否允许选择任意一级的选项  默认false
            },


            //控制对话框的显示与隐藏
            dialogVisible_addGoods:false,//添加分类对话框
            dialogVisible_edit:false,//添加分类对话框

            //定义vue-table-with-tree-grid的columns（列）  每一列为一个对象
            columns:[{
                label:'分类名称',          //label设置标题
                prop:'cat_name'           //prop绑定的是该列的数据源（还可以width设置宽度）
            },{
                label:"是否有效",
                type:'template',        //声明  表示将当前的列定义为模板列
                template:'isok'         //表示当前这列使用的模板名称  在上面的template模板中与slot=“模板名称”相对应
            },{
                label:'排序',
                type:'template',
                template:'paixu'
            },{
                label:'操作',
                type:'template',
                template:'caozuo'
            }],

            //表单验证规则
            rules:{
                cat_name:[
                    { required: true, message: '请输入分类名称', trigger: 'blur' },
                ]
            }

        }
    },
    // methods方法
    methods:{
        //请求所有的商品信息
        async getGoodsmesage(){
            const {data:fer} = await this.$http.get("categories",{params:this.goodsInfor});
            if(fer.meta.status == 200){
                //将数据列表保存到定义的数组中
                this.goodsTable = fer.data.result;
                //保存总数据total
                this.total = fer.data.total;
            }else{
                this.$message.error("商品信息获取错误！！！");
            }
        },

        //打开  添加分类 对话框
        async addGoods(){
            //发送axios请求  获取只有两级的商品列表
            const {data:fre} = await this.$http.get("categories",{params:{type:2}});
            if(fre.meta.status === 200){
                this.goodsTableListTwo = fre.data;
            }else{
                this.$message.error("父级分类列表获取失败！！！")
            }
            //打开添加分类对话框
            this.dialogVisible_addGoods = true;
        },

        //点击添加分类对话框的确定后 进行数据提交
        addGoodsOK(){
            //判断分级层次   （注意：分级层级为字符串）
            if(this.CascaderValue.length === 2){
                this.addFrom.cat_level = "2"     //分类层级  `2`表示三级分类
            }else if(this.CascaderValue[0] != 0){
                this.addFrom.cat_level = "1"    //分类层级  `1`表示二级分类
            }else{
                this.addFrom.cat_level = "0"    //分类层级 `0`表示一级分类
            }

            //发送axios之前 对整个表单进行validate 校验
            this.$refs.addRef.validate(async  bool => {
                if(bool){
                    // 发送axios请求 进行数据添加
                    const {data:fff} = await this.$http.post("categories",this.addFrom);
                    if(fff.meta.status == 201){
                        this.$message.success("分类添加成功！！！");
                        //重新请求数据
                        this.getGoodsmesage();
                        //关闭分类对话框
                        this.dialogVisible_addGoods = false;
                    }else{
                        this.$message.error("分类添加失败！！！")
                    }
                }else{
                    this.$message.error("表单校验失败，请属于正确格式的数据！！")
                }
            })


        },

        // 打开"编辑goods"对话框
        goodsEdit(lazySheep){
            //将值赋值给dada中定义的数  使其打开对话框在页面就展示改内容
            this.editFrom.cat_name = lazySheep.cat_name;
            //赋值id
            this.editFrom.cat_id = lazySheep.cat_id;
            //打开编辑对话框
            this.dialogVisible_edit = true;
        },
        // 在"编辑goods" 对话框中点击"确定"之后
        goodsEditOK(){
            //发送请求之前先校验规则
            this.$refs.editREF.validate(async  bool => {
                if(bool){
                    //发送axios请求
                    const {data:refs} = await this.$http.put(`categories/${this.editFrom.cat_id}`,{cat_name:this.editFrom.cat_name});
                    if(refs.meta.status == 200){
                        this.$message.success("修改用户名称成功！！！！");
                        //重新获取数据
                        this.getGoodsmesage();
                        //关闭"编辑"对话框
                        this.dialogVisible_edit = false;
                    }else{
                        this.$message.error("修改分类名称失败！！！ 原因为：",this.meta.msg);
                    }
                }else{
                    this.$message.error("请输入正确的名称格式！！")
                }
            })
        },


        //删除goods
        goodsDelete(lazySheep){
            console.log(lazySheep);
            this.$confirm('此操作将永久删除该文件, 是否继续?', '提示', {
            confirmButtonText: '确定',
            cancelButtonText: '取消',
            type: 'warning'
            }).then(async () => {
                //发送axios请求 进行删除
                const {data:rfee} = await this.$http.delete(`categories/${lazySheep.cat_id}`);
                if(rfee.meta.status == 200){
                    //重新获取数据
                    this.getGoodsmesage();
                    this.$message.success("删除成功！！！");
                }else{
                    this.$message.error("删除失败！！！");
                }
            }).catch(() => {
                this.$message.info("已取消删除！！！")
            });
        },

        //级联选择器选择项发生变化  触发该函数
        handleChange(){
            // console.log("级联选择器选择项发生了变化：",this.CascaderValue);
            //此时CascaderValue数组中 保存着选择的选项id   将其转换为字符串保存到  分类父 ID（cat_pid）中   且只要最后一位
                //this.CascaderValue[this.CascaderValue.length - 1]    选择数组中的最后一项
                //String（）    将最后一项转换为字符串类型
            this.addFrom.cat_pid = String(this.CascaderValue[this.CascaderValue.length - 1]);
        },

        //分页的事件
            //监听pagesize改变的事件
            handleSizeChange(val) {
                    this.goodsInfor.pagesize = val;
                    this.getGoodsmesage();
                    // console.log(`每页 ${val} 条`);
            },
            //监听pagenum的变化
            handleCurrentChange(val) {
                    this.goodsInfor.pagenum = val;
                    this.getGoodsmesage();
                    // console.log(`当前页: ${val}`);
            },

        //关闭对话框  销毁所有事件等等
        destroyDialog(x){
            if(x === 'add'){
                //重置保存级联选择器数据的CascaderValue
                this.CascaderValue = 0;
                //对整个表单进行重置，将所有字段值重置为初始值并移除校验结果
                this.$refs.addRef.resetFields();
            }
            if(x === 'edit'){
                //对整个表单进行重置，将所有字段值重置为初始值并移除校验结果
                this.$refs.editREF.resetFields();
            }
        },
    },

    //生命周期钩子，在页面渲染之前完成axios请求，请求到页面需要的数据
    created(){
        this.getGoodsmesage();
    },
}
</script>

<style scoped>
.zk-table{
    margin-top: 20px;
}
.el-cascader{
    width: 100%;
}
</style>